<template>
  <div class="session-item-style">
    <div class="top-item-group">
      <div class="top-session-title">{{currentSession.visiterName}}</div>
      <div class="top-button-group">
        <el-link @click="closeSession" :underline="false">
          <div class="top-button-style">
            <i class="iconfont button-icon-style">&#xe747;</i>
            <div style="display: inline-block">结束会话</div>
          </div>
        </el-link>
      </div>
    </div>

    <div class="bottom-item-group">
      <div class="left-msg-group">
        <div class="left-top-group" id="dialogContainer" v-loading="isLoading">
          <SessionDialog :messages="messageList" :type="'visitor'" :currentSession="currentSession"></SessionDialog>
        </div>
        <div class="left-bottom-group">
          <div class="left-bottom-item">
            <i class="iconfont bottom-item-style">&#xe766;</i>
            <i class="iconfont bottom-item-style">&#xe764;</i>
          </div>
          <div class="left-bottom-textarea">
            <textarea
              v-model="msgContent"
              autocomplete="off"
              rows="10"
              placeholder
              maxlength="2000"
              class="el-textarea__inner"
              style="max-height: 95px;min-height: 50px;"
            ></textarea>
          </div>
          <div class="left-bottom-send">
            <el-button @click="handleSendMessage" type="primary" size="medium">发&nbsp;&nbsp;&nbsp;送</el-button>
          </div>
        </div>
      </div>

      <div class="right-info-group">
        <div class="info-item-group">
          <div style="padding-bottom:15px;border-bottom: 1px solid #e4e7ed;">
            <br />
            <div class="info-title">访客信息</div>
            <div class="visitor-info">
              <div class="info-item">
                <span class="info-label">来源</span>
                {{visitorInfo.terminal}}
              </div>
              <div class="info-item">
                <span class="info-label">IP地址</span>
                {{visitorInfo.ip}}
              </div>
              <div class="info-item">
                <span class="info-label">浏览器</span>
                {{visitorInfo.browser}}
              </div>
              <div class="info-item">
                <span class="info-label">屏幕尺寸</span>
                {{visitorInfo.screenSize}}
              </div>
              <div class="info-item">
                <span class="info-label">设备</span>
                {{visitorInfo.device}}
              </div>
              <br />
              <br />
            </div>
          </div>
          <div class="info-bottom-group">
            <div class="info-title">
              <span>客服信息</span>
            </div>
            <div class="customer-info">
              <div class="info-item">
                <span class="info-label">客服昵称</span>
                {{customerServiceInfo.nickName}}
              </div>
              <div class="info-item">
                <span class="info-label">客服工号</span>
                {{customerServiceInfo.customerServiceId}}
              </div>
              <div class="info-item">
                <span class="info-label">客服角色</span>
                {{customerServiceInfo.serviceRole}}
              </div>
              <div class="info-item">
                <span class="info-label">客服组</span>
                {{customerServiceInfo.serviceGroup}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="访客登录" :visible.sync="dialogFormVisible">
      <div class="add-dialog-style">
        <el-form :model="visitorForm">
          <el-form-item required label="访客ip地址">
            <el-input v-model="visitorForm.ip" autocomplete="off" placeholder="请输入访客的ip地址"></el-input>
          </el-form-item>
          <el-form-item label="访客名称">
            <el-input v-model="visitorForm.name" autocomplete="off" placeholder="请输入访客的ip地址"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button style="float:right" type="primary" @click="handleCreateVisitor">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SessionDialog from "@/components/items/SessionDialog";
import getRandIP from "@/utils/randIP.js";
import api from "@/api/api";
export default {
  name: "VisitorSession",
  components: {
    SessionDialog
  },
  data() {
    return {
      msgContent: "",
      personalCollapse: "1",
      publicCollapse: "1",
      isPersonal: true,
      keyword: "",
      dialogFormVisible: true,
      visitorForm: {},
      webSocket: null,
      messageList: [],
      visitorInfo: {},
      customerServiceInfo: {},
      currentSession: {},
      isLoading: false,
      sessionId: null
    };
  },
  watch: {},
  computed: {},
  methods: {
    closeSession() {
      this.$confirm("确定要结束当前会话吗?", "结束会话确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.closeWebSocket();
        this.visitorInfo = {};
        this.customerServiceInfo = {};
        this.visitorForm = {};
        this.dialogFormVisible = true;
        // this.$message({
        //   type: "success",
        //   message: "结束会话成功"
        // });
      });
    },
    handleCreateVisitor() {
      api
        .createVisitorAPI({
          ip: this.visitorForm.ip,
          visitorName: this.visitorForm.name,
          terminal: "网页",
          browser: "Chrome 81.0.4044.138",
          screenSize: "1440 x 900",
          device: "Windows",
          state: "在线"
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.dialogFormVisible = false;
            this.$message({
              message: "访客信息创建成功",
              type: "success"
            });
            this.sessionId = data;
            this.handleCreateWS(data);
            this.handleGetVisitor();
            this.getSession();
            this.getSessionMessage();
          }
        });
    },
    handleGetVisitor() {
      api.getVisitorAPI(this.visitorForm.ip).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.dialogFormVisible = false;
          this.visitorInfo = data;
          this.handleGetCS(this.visitorInfo.customerServiceId);
          this.$message({
            message: "获取访客信息成功",
            type: "success"
          });
        }
      });
    },
    handleGetCS(customerServiceId) {
      api.getCustomerServiceAPI(customerServiceId).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.customerServiceInfo = data;
        }
      });
    },
    handleCreateWS(sessionId) {
      this.webSocket = new WebSocket(
        `ws://localhost:8080/session/${sessionId}/visitor/message`
      );
      this.webSocket.onopen = this.setOnOpen;
      this.webSocket.onmessage = this.setOnMessage;
      this.webSocket.onerror = this.setOnError;
      this.webSocket.onclose = this.setOnClose;
    },
    setOnError() {
      this.$message.error("会话连接失败");
    },
    setOnOpen() {
      this.$message({
        message: "会话连接成功",
        type: "success"
      });
    },
    setOnMessage(event) {
      this.messageList.push(JSON.parse(event.data).data);
    },
    setOnClose() {
      this.$message({
        message: "会话连接关闭",
        type: "warning"
      });
    },
    closeWebSocket() {
      this.webSocket.close();
    },
    handleSendMessage() {
      if (this.msgContent != "") {
        this.webSocket.send(
          JSON.stringify({
            content: this.msgContent
          })
        );
        this.msgContent = "";
      } else {
        this.$message({
          message: "消息不能为空",
          type: "warning"
        });
      }
    },
    getSessionMessage() {
      this.isLoading = true;
      api.getSessionMessageAPI(this.sessionId).then(res => {
        this.isLoading = false;
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          // this.messageNum = data.total;
          this.messageList = data.page;
        }
      });
    },
    getSession() {
      api.getSessionAPI(this.sessionId).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.currentSession = data;
        }
      });
    },
    handleScrollBottom() {
      let ele = document.getElementById("dialogContainer");
      ele.scrollTop = ele.scrollHeight;
    }
  },
  created() {},
  mounted() {},
  updated() {
    this.handleScrollBottom();
  }
};
</script>

<style scoped>
.session-item-style {
  background-color: #fff;
  border-radius: 5px;
  height: auto;
  width: 100%;
}
.top-item-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e6f1ff;
}
.bottom-item-group {
  display: flex;
}
.top-session-title {
  font-size: 20px;
}
.top-button-group {
  width: 400px;
  display: flex;
  position: relative;
  left: 100px;
  justify-content: space-evenly;
}
.top-button-style {
  font-size: 16px;
  color: #409eff;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.top-button-style:hover {
  color: #0368ec;
}
.button-icon-style {
  font-size: 25px;
  font-weight: 600;
  display: block;
}
.left-msg-group {
  width: 80%;
  border-right: 1px solid #e4e7ed;
}
.left-top-group {
  width: 100%;
  height: 63vh;
  background-color: #f9f9f9;
  overflow: scroll;
}
.left-bottom-send {
  margin: 10px;
  float: right;
}
.left-bottom-item {
  padding: 10px 20px 0;
}
.bottom-item-style {
  color: gray;
  font-size: 30px;
  padding: 0 5px;
}
.right-info-group {
  padding: 0 20px;
  display: flex;
  justify-content: center;
}
.el-textarea__inner {
  outline: none;
  border: none;
  font-size: 15px;
}
.info-item-group {
  padding: 0 10px;
}
.info-title {
  font-size: 24px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-label {
  font-size: 13px;
  color: #cfcfcf;
  display: inline-block;
  width: 80px;
}
.info-item {
  color: #4b4a4a;
  padding: 10px 0;
  font-size: 13px;
}
.info-bottom-group {
  margin-top: 15px;
}
.add-dialog-style {
  height: 250px;
  padding: 20px;
}
</style>
<style>
.el-tabs__item {
  margin-bottom: 10px;
}
.el-tabs__nav-wrap::after {
  height: 0.5px;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
